<template>
  <div v-loading="dataLoading">
    <div class="table-default">
      <el-button type="primary" class="backBtn" @click="backHandler">返回</el-button>

      <div id="base" ref="base">
        <!-- {{ dassemblyOrderObj }} --{{ DassemblyTypeObj[dassemblyOrderObj.order_type] }} --{{ DocStatus[dassemblyOrderObj.status] }} --{{ dassemblyOrderObj.created_at }} -->
        <el-descriptions :column="4" border title="基本信息" v-if="dassemblyOrderObj.docno">
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="组装拆卸单号">{{ dassemblyOrderObj.docno }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="装配类型">
            <el-tag class="ml-2" type="success" v-if="dassemblyOrderObj.order_type == 'Assembly'">{{ DassemblyTypeObj[dassemblyOrderObj.order_type] }}</el-tag>
            <el-tag class="ml-2" type="primary" v-if="dassemblyOrderObj.order_type == 'Dassembly'">{{ DassemblyTypeObj[dassemblyOrderObj.order_type] }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="单据状态">{{ DocStatus[dassemblyOrderObj.status] }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="创建时间">{{ dassemblyOrderObj.created_at }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="product-table">
        <h2 style="font-weight: bold; margin-top: 1rem; color: #303133">成品列表</h2>
        <el-button @click="setCurrent()" class="clear-chose">清空选择</el-button>
        <el-table :data="tableData" ref="singleTableRef" class="mt-3" v-loading="loading" border highlight-current-row @current-change="handleCurrentChange" style="cursor: pointer">
          <el-table-column prop="material.fnumber" label="品号" min-width="110" />
          <el-table-column prop="material.fname" label="品名" min-width="200" />
          <el-table-column prop="cargo_name" label="组织名称" width="100" />
          <el-table-column prop="cargo_name" label="货主名称" />
          <el-table-column prop="wms_code" label="仓库代码" />
          <el-table-column label="单据状态" prop="status">
            <template #default="scope">
              {{ DocStatus[scope.row.status] }}
              <!-- <el-tag class="ml-2" type="warning" v-if="scope.row.status == 0">{{ DocStatus[scope.row.status] }}</el-tag>
              <el-tag class="ml-2" type="success" v-if="scope.row.status == 1">{{ DocStatus[scope.row.status] }}</el-tag>
              <el-tag class="ml-2" type="danger" v-if="scope.row.status == 2">{{ DocStatus[scope.row.status] }}</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column prop="material.funit_name" label="单位" />
          <el-table-column prop="qty" label="数量">
            <template #default="scope">
              {{ Number(scope.row.qty) }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <h2 style="font-weight: bold; margin-top: 1rem; color: #303133">单据体列表</h2>
      <el-table :data="detailData" v-loading="detailLoading" ref="singleTableRef" class="mt-3" border>
        <el-table-column prop="material.fnumber" label="品号" min-width="110" />
        <el-table-column prop="material.fname" label="品名" min-width="200" />
        <el-table-column prop="wms_code" label="仓库代码" />
        <el-table-column prop="material.funit_name" label="单位" />
        <el-table-column prop="qty" label="数量">
          <template #default="scope">
            {{ Number(scope.row.qty) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(reset)" :primary="id" :api="api" />
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, reactive, nextTick } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import http from '/admin/support/http'
import { useRouter, useRoute } from 'vue-router'
import { delDetailRouter } from '/admin/utils/delDetailRouter'

let router = useRouter()
let route = useRoute()

const api = `production/dassembly/product?order_id=${route.query.id}`

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)

const activeName = ref('details')

let currentRow = ref('')

const singleTableRef = ref()

let dataLoading = ref(false)
let detailLoading = ref(false)

let DocStatus = reactive({})
let DocStatusArr = ref([])
let DassemblyTypeObj = reactive({})
let DassemblyTypeArr = ref([])
let dassemblyOrderObj = reactive({})
let detailData = ref([])

const request0 = http.get(`production/dassembly/order/${route.query.id}`)
// const request1 = http.get(`options/DocStatus`)
const request1 = http.get(`options/DassemblyOrderStatus`)
const request2 = http.get(`options/DassemblyType`)

// 选择某行高亮
const handleCurrentChange = val => {
  currentRow.value = val
  console.log('选择某行val', val, val.id)
  detailLoading.value = true
  getrequestDetail(val.id).then(res => {
    console.log(res.data.data)
    detailData.value = res.data.data
    detailLoading.value = false
  })
}

//清空选择
const setCurrent = row => {
  singleTableRef.value!.setCurrentRow(row)
  // 清空
  detailLoading.value = true

  getrequestDetail('').then(res => {
    console.log(res.data.data)
    detailData.value = res.data.data
    detailLoading.value = false
  })
}

const getrequestDetail = product_id => {
  return http.get(`production/dassembly/detail?order_id=${route.query.id}&product_id=${product_id}`)
}

let getAllData = () => {
  dataLoading.value = true
  Promise.all([request0, request1, request2, getrequestDetail('')])
    .then(response => {
      dassemblyOrderObj = response[0].data.data
      console.log('请求详情内单据头', dassemblyOrderObj)

      DocStatusArr.value = response[1].data.data
      response[1].data.data.forEach(item => {
        DocStatus[item.value] = item.label
      })
      console.log('单据状态', DocStatus)

      DassemblyTypeArr.value = response[2].data.data
      response[2].data.data.forEach(item => {
        DassemblyTypeObj[item.value] = item.label
      })
      console.log('装配类型', DassemblyTypeObj)

      detailData.value = response[3].data.data

      console.log('单据体数据', detailData.value)
      dataLoading.value = false
    })
    .catch(error => {
      console.error(error)
      dataLoading.value = false
    })
}

// let getDocStatus = () => {
//   http.get(`options/DocStatus`).then(r => {
//     DocStatusArr.value = r.data.data
//     r.data.data.forEach((item, index) => {
//       DocStatus[item.value] = item.label
//     })
//     console.log('单据状态', DocStatus)
//   })
//   http.get(`options/DassemblyType`).then(r => {
//     DassemblyTypeArr.value = r.data.data
//     r.data.data.forEach((item, index) => {
//       DassemblyTypeObj[item.value] = item.label
//     })
//     console.log('装配类型', DassemblyTypeObj)
//   })
// }

// let getdassemblyOrder = id => {
//   http.get(`production/dassembly/order/${id}`).then(r => {
//     dassemblyOrderObj = r.data.data
//     console.log('请求详情内单据头', dassemblyOrderObj)
//   })
// }

const backHandler = () => {
  delDetailRouter('组装拆卸单详情', '/production/dassemblyOrder')
}

onMounted(() => {
  search()
  deleted(reset)
  // nextTick(() => {
  //   getDocStatus()
  //   getdassemblyOrder(route.query.id)
  // })
  getAllData()
})
</script>

<style lang="css">
.backBtn {
  margin: 20px 10px;
}
.demo-tabs {
  margin-top: 20px;
}
.product-table {
  /* border: 1px solid #000; */
  position: relative;
}
.clear-chose {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
}
</style>
